<template>
  <div class="iot_GoodsDetails" v-if="GoodsDetail[0] && OptionActive">
    <div class="iot_DetailsUp">
        <div class="iot_DetailsBanner">
          <img :src="GoodsDetail[0].mainPictures[imgNumber]" alt="">
          <div class="iot_little">
            <img v-for="(imgscr,index) in GoodsDetail[0].mainPictures"  
            :src="imgscr" alt="" 
            :key="index" 
            :class="Active[index]"
            @mouseover="ChangeImgNumber(index),GetActive(index)">
          </div>
        </div>
        <div class="iot_price">
          <p v-text="GoodsDetail[0].name"></p>
          <P v-text="GoodsDetail[0].desc"></P>
          <p> {{'￥'+GoodsDetail[0].skus[sum].price}}</p>
          <div class="iot_info">
            <img :src="GoodsDetail[0].skus[sum].picture || ImgFalse" alt="">
            <div class="iot_inInfo">
              <div class="iot_ininInfo">
              <p style="font-size: 15px;">{{'库存：'+GoodsDetail[0].skus[sum].inventory}}</p>
              <div style="display: flex;">
                <p style="font-size: 15px; ">{{ '数量：' }}</p>
                <a href="" @click.prevent="">
                <div class="iot_minus iot_signal" :class="minus" @click="numberMinus">-</div>
              </a>
                <div class="iot_number">{{ number }}</div>
                <a href="" @click.prevent="">
                <div class="iot_plus iot_signal iot_allowed" @click="numberPlus">+</div>
              </a>
              </div>
            </div>
              <p>{{'已选：'+Options}}</p>
            </div>
          </div>
          <div class="iot_Detailoption">
            <div class="iot_unit" v-for="(items,Xindex) in GoodsDetail[0].specs" :key="Xindex">
              <div class="iot_optionUp">{{ items.name }}</div>
              <div class="iot_InOptions">
                <a href="" 
                v-for="(item,Yindex) in items.values"
                @click.prevent="GetOptionActive(Xindex,Yindex)"
                :key="Yindex" >
                <div class="iot_options"  
                :class="OptionActive[Xindex][Yindex]">{{ item.name }}</div></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    <div class="iot_DetailsDescribe">
      <DetailsDescribe :information="GoodsDetail[0]"></DetailsDescribe>
    </div>
    <div class="iot_DetailsDown">
      <DetailsDown 
      :sum="sum" 
      :number="number" 
      :information="GoodsDetail[0]"
      :Options="Options"
      :ImgFalse="ImgFalse"></DetailsDown>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref } from 'vue';
import DetailsDescribe from './DetailsDescribe.vue';
import DetailsDown from './DetailsDown.vue';


export default {
    name:'GoodsDateils',
    props:['GoodsDetail'],
    components:{
      DetailsDescribe,
      DetailsDown
    },
    setup(props){
      //图片交互
      let imgNumber = ref(0)
      function ChangeImgNumber(index){
        imgNumber.value = index;
      }
      let Active = reactive(['iot_active','','','',''])
      function GetActive(index){
        for(let i = 0 ; i < 5; i++){
          Active[i] = ''
        }
        Active[index] = 'iot_active'
      }
      //选项交互
      let OptionActive = computed(()=>{
        let InOptionActive = reactive([]);
        for(let i = 0; i <props.GoodsDetail[0].specs.length ; i++){
          InOptionActive.push([])
        for(let j = 0 ;j < props.GoodsDetail[0].specs[i].values.length;j++){
          InOptionActive[i].push('')
        }
      }
      return InOptionActive
      })
      function GetOptionActive(Xindex,Yindex){
        for(let i = 0; i < OptionActive.value[Xindex].length;i++){
          OptionActive.value[Xindex][i] = ''
        }
        OptionActive.value[Xindex][Yindex] = 'iot_OptionsActive'
      }
      let Options = computed(()=>{
        let string = ''
        for(let i = 0;i < OptionActive.value.length;i++){
          for(let j = 0 ; j < OptionActive.value[i].length;j++){
            if(OptionActive.value[i][j] == 'iot_OptionsActive'){
              string = string+props.GoodsDetail[0].specs[i].values[j].name+' '
              break
            }
          }
        }
        return string
      })
      let sum = computed(()=>{
        let insum = 0
        let OptionsArray =  Options.value.split(' ');
        OptionsArray.pop()
        props.GoodsDetail[0].skus.forEach((e,index) => {
          let i = 0
          for(; i < e.specs.length; i++){
            if(e.specs[i].valueName != OptionsArray[i]){
              break
            }
          }
          if(i == e.specs.length){
            insum =  index;
          }
        });
        return insum
      })
      //数量
      let number = ref(0)
      let minus = reactive({iot_allowed:false})
      function numberPlus(){
        if(number.value < props.GoodsDetail[0].skus[sum.value].inventory){
              number.value++    
        }
        if(number.value > 0){
          minus.iot_allowed = true
        }
      }
      function numberMinus(){
        if(number.value > 0){
          number.value--
        }
        if(number.value == 0){
          minus.iot_allowed = false
        }
      }
    //加载图片失败
    const ImgFalse = require('../assets/icons/logo/False.png')
    return {ChangeImgNumber,imgNumber,GetActive,Active,OptionActive,GetOptionActive,Options,sum,number,minus,numberPlus,numberMinus,ImgFalse}
    }
}
</script>

<style scoped>
.iot_DetailsDown{
  position: fixed;
  top: 100%;
  transform: translate(0,-100%);
  height: 70px;
  width: 875.2px;
}
.iot_Detailoption{
  height: 155px;
  overflow: auto;
}
.iot_Detailoption::-webkit-scrollbar{
        width: 5px;
    }
  .iot_Detailoption::-webkit-scrollbar-thumb{
        background:#b0b0b0;
        border-radius: 1px; 
    }
.iot_optionUp{
  text-align: left;
  margin: 8px 0;
  color: #999999;
}
.iot_InOptions{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
}
.iot_options{
  padding: 0 8px;
  margin: 3px 10px 3px 0;
  border: 1px solid #999999;
  color: #999999;
}
.iot_options.iot_OptionsActive{
  border: 1px solid #27ba9b;
  color: #27ba9b;
}
.iot_info{
  display: flex;
}
.iot_info img {
  width: 50px;
  height: 50px;
}
.iot_inInfo{
  margin-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.iot_inInfo .iot_signal{
  width: 30px;
  height: 22.5px;
  display: flex;
  justify-content: center;
  background: #f7f7f7;
  line-height: 22.5px;
  color: #999999;
}
.iot_plus{
  border-radius: 0 5px 5px 0;
}
.iot_minus{
  margin-left:20px ;
  border-radius: 5px 0 0 5px;
}
.iot_number{
  background-color: #dbdbdb;
  width: 40px;
  margin: 0 5px;
  line-height: 22.5px;
}
.iot_ininInfo{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.iot_inInfo .iot_signal.iot_allowed{
  color: #2c3e50;
  background-color: #dbdbdb;
}
.iot_GoodsDetails{
    margin:  40px 40px 70px;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .iot_DetailsUp{
    display: flex;
  }
  .iot_price{
    flex:1;
    margin: 5px 0 0 50px;
  }
  .iot_price p{
    text-align: left;
    margin: 0;
  }
  .iot_price p:nth-child(1){
    font-size: 25px;
  }
  .iot_price p:nth-child(2){
    font-size: 15px;
  }
  .iot_price p:nth-child(3){
    font-size: 20px;
    color: #cf4444;
  }
  .iot_DetailsBanner{
    display: flex;
  }
  .iot_DetailsBanner img{
    width: 300px;
    border-radius: 5px;
  }
.iot_little{
  margin:0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.iot_little img{
  width: 50px;
  height: 50px;
}
.iot_little img.iot_active{
  border: 1px solid #27ba9b;
}
</style>